<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>基础柱状图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;}</style>
</head>
<body>
<div id="mountNode"></div>
<div>
    <button>导出</button>
</div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.11/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.7/data-set.min.js"></script>
<script>
'use strict';

var data = [
    //{ year: '2001 年', count: 45 },
    //{ year: '2002 年', count: 61 },
    //{ year: '2003 年', count: 73 },
    //{ year: '2004 年', count: 91  },
    //{ year: '2005 年', count: 103 },
    //{ year: '2006 年', count: 151 },
    //{ year: '2007 年', count: 273 },
    { year: '2008 年', count: 512 },
    { year: '2009 年', count: 1000 },
    { year: '2010 年', count: 1996 },
    { year: '2011 年', count: 3890 },
    { year: '2012 年', count: 5633 },
    { year: '2013 年', count: 11390},
    { year: '2014 年', count: 22915},
    { year: '2015 年', count: 36000},
    { year: '2016 年', count: 56875},
    { year: '2017 年', count: 82285},
    { year: '2018 年 5 月', count: 94868},
];
var chart = new G2.Chart({
  container: 'mountNode',
  forceFit: true,
  height: window.innerHeight - 50
});
chart.source(data);
chart.scale('count', {
  tickInterval: 10000,
  max: 100000
});
chart.interval().position('year*count').label('count');
chart.render();

// 导出图片
var btn = document.getElementsByTagName('button')[0]
btn.onclick = expImg

function expImg() {
    chart.downloadImage()
}
</script>
</body>
</html>

